import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import My from '../views/My.vue'
import Class from '../views/Class.vue'
import Number from '../views/Number.vue'
import Login from '../views/Login.vue'
import Details from '../views/Details.vue'
import Curriculum from '@/components/shouye/Curriculum.vue'
import Personality from '@/components/shouye/Personality.vue'
import Tiny from '@/components/shouye/Tiny.vue'
import Datum from '../views/Number/Datum.vue'
import Car from '../views/Number/Car.vue'
import Order from '../views/Number/Order.vue'
import Article from "../views/Article"
import Menu from '@/components/Menu.vue'
import store from '../store'

Vue.use(VueRouter)

export const modee = [
  {
    path: '/',
    name: '首页',
    components: { default: Home , Menu },
    icon:"el-icon-s-home",
    title:"首页",
    meta:{
      title:"信息展示"
    },
    children:[
      {
        path:'/',
        component: Personality,
        title:"个性推荐",
      },
      {
        path:'Curriculum',
        component: Curriculum,
        title:"课程",
      },
      {
        path:'Tiny',
        component: Tiny,
        title:"微专业",
      }
    ]
  },
  {
    path: '/details/:id',
    name: 'Details',
    components: { default: Details }
  },
  {
    path:"/article/:id",
    component:Article,
    name:"Article"
  },
  {
    path: '/datum',
    component: Datum,
    meta: {
      isNeed: true
    }
  },
  {
    path: '/order',
    component: Order,
    meta: {
      isNeed: true
    }
  },
  {
    path: '/class',
    name: '分类',
    components: {default: Class , Menu },
    icon:"el-icon-s-grid",
    title:"分类",
    meta:{
      title:"信息展示"
    },
  },
  {
    path: '/my',
    name: '我的课程',
    components: {default: My , Menu },
    icon:"el-icon-s-management",
    title:"我的课程",
    meta:{
      title:"信息展示"
    },
    meta: {
      isNeed: true
    }
  },
  {
    path: '/car',
    component: Car,
    meta: {
      isNeed: true
    }
  },
  {
    path: '/number',
    name: 'Number',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    components: {default: Number , Menu },
    icon:"el-icon-user-solid",
    title:"账号",
  },
  {
    path: '/login',
    component: Login,
    // beforeEnter: (to, from, next) => {
    //   if (store.state.user.userid) {
    //     next('/');
    //   }else{
    //     next()
    //   }
      
    // }
  },
]

const routes = [
  {
    path: '/Personality',
    name: '首页',
    component: Home,
    children:[
      {
        path:'Personality',
        component: Personality,
      },
      {
        path:'Curriculum',
        component: Curriculum,
      }
    ]
  },
  
  {
    path: '/class',
    name: '分类',
    component: Class
  },
  {
    path: '/my',
    name: '我的课程',
    component: My
  },
  {
    path: '/number',
    name: 'Number',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Number
  },
  // ...routes
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes:modee
})

router.beforeEach((to, from, next) => {
  if (to.meta.isNeed) {  // 判断该路由是否需要登录权限
    if (store.state.user.userid) {  // 通过vuex state获取当前的token是否存在
      next();
    }
    else {
      next({
        path: '/login',
        query: { redirect: to.fullPath }  // 将跳转的路由path作为参数，登录成功后跳转到该路由
      })
    }
  }
  else {
    next();
  }
})
export default router
